<template>
  <div>
    <el-table :data="uploadList" border ref="reftableFile" :height="tableHeightFile" stripe
      style="width: 100%;height: 220px;overflow: auto;" class="margin_top" @cell-dblclick="celldblclick">
      <el-table-column prop="address" label="操作" width="200px" align="center" header-align="center">
        <template slot-scope="scope">
          <span class="wenjianannniu el-icon-edit" plain
            @click="onClickDocumentTap(scope.row, false)" size="mini" title="补充属性信息"></span>
          <span class="wenjianannniu el-icon-document" plain
            @click="onClickDocumentTap(scope.row, true)" size="mini" title="查看属性信息"></span>
          <span class="wenjianannniu el-icon-view" plain @click="onPreviewTap(scope.row)"
            size="mini" title="预览"></span>
          <span class="wenjianannniu el-icon-sort" plain @click="onDocToOfd(scope.row)"
            size="mini" title="转换"></span>
           
          <span class="wenjianannniu sb" type="text"  plain size="mini"
            @click="identifyTap(scope.row)" title="识别">
            </span>
          <span class="wenjianannniu el-icon-delete" plain @click="delTap(scope.row)" size="mini"
            title="删除"></span>
        </template>
      </el-table-column>
      <el-table-column v-for="(col, index) in tableHeaderList" :key="index" :prop="col.FIELD_NAME"
        :label="col.FIELD_CAPTION" :align="col.TH_ALIGN" :header-align="col.TH_ALIGN" :render-header="renderHeaderFile"
        show-overflow-tooltip
        :width="col.TH_WIDTH == null || col.TH_WIDTH == 0 || col.TH_WIDTH == 'null' ? 200 : col.TH_WIDTH">
        <template slot-scope="scope">
        
          <!--文件大小-->
          <div v-if="tableHeaderList[index].FIELD_NAME == 'DOC_FILE_SIZE'" style="cursor: pointer;">

            {{ scope.row[tableHeaderList[index].FIELD_NAME] | changeType }}
            </div>
    
          <!--文件类型-->
          <div v-else-if="tableHeaderList[index].SHOWTYPE == 5" style="cursor: pointer;">
              <!-- 文件密级下拉-->
            <el-select v-if="tableHeaderList[index].FIELD_NAME == 'MJ'" v-model="scope.row[tableHeaderList[index].FIELD_NAME]" placeholder="请选择文件密级"
              @change="handlechange($event, scope.row)">
              <el-option v-for="(item, idx) in dictList[col.FIELD_NAME]" :key="idx" :label="item.dictLabel"
                :value="item.dictValue"></el-option>
            </el-select>
            <!-- 普通字典显示 -->
            <span v-else v-for="(i, idx) in dictList[col.FIELD_NAME]" :key="idx">
              {{ scope.row[tableHeaderList[index].FIELD_NAME] == i.dictValue ? i.dictLabel : '' }}
            </span>
          </div>


          <div style="cursor: pointer;" v-else> {{ scope.row[tableHeaderList[index].FIELD_NAME] }}</div>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>
<script>

import { getTypeObject } from "@/api/archive/dict/dictManageData";
import {
  changeFileMj
} from "@/api/archive/fileCollection/offlinReception.js";
import {
  getdamjbyrymj
} from "@/api/archive/fileCollection/offlinReception.js";
export default {
  archive_Dicts: ['WJLX', 'MJ'], // 门类树添加---原文类型
  props: ["uploadList", "tableHeaderList", 'openInfo','inputParams'],
  filters: {
    changeType(val) {

      if (val == "0") return "0B";
      var k = 1024;
      var sizes = ["B", "KB", "MB", "GB", "TB"];
      // console.log('Math.log(val)', Math.log(val));
      // console.log('Math.log(k)', Math.log(k));
      let i = Math.floor(Math.log(val) / Math.log(k));//得出该数字的单位应该是kB?MB
      let convertedVal = (val / Math.pow(k, i)).toPrecision(3);
      if (convertedVal.includes("e")) {
        convertedVal = parseFloat(convertedVal).toFixed(0);
      }
      // console.log(i, convertedVal + sizes[i]);
      return convertedVal + sizes[i];

    },
  },
  watch: {
    tableHeaderList: {
      handler(val) {
        console.log(this.uploadList, this.tableHeaderList, this.openInfo, "===========")
        var headerlist = [];
        for (var i = 0; i < this.tableHeaderList.length; i++) {
          if (this.tableHeaderList[i].SHOWTYPE.toString().indexOf('5') != -1) {
            this.tableHeaderList[i].SHOWTYPE = 5
          }
          if (this.tableHeaderList[i].SHOWTYPE == 5) {

            headerlist.push(this.tableHeaderList[i].FIELD_NAME)
          }
        }
         console.log(headerlist,"++++")
        if (headerlist.length > 0) {
          getTypeObject(headerlist).then((res) => {
            getdamjbyrymj().then(resdata => {
              var mjdata = [];

              for (var i in resdata.data) {

                for (var j in res.data.MJ) {
                  if (resdata.data[i].daMj == res.data.MJ[j].dictValue) {
                    mjdata.push(res.data.MJ[j])
                  }
                }
              }
              res.data.MJ = mjdata

              this.dictList = res.data;

              console.log(this.dictList, "-------------")
            })



          })

        }
      },
      immediate: true
    }
  },
  data() {
    return {
      tableHeightFile: "220",
      dictList: {}, // 字典项
      mijiUpdate: "",
    }
  },
  created() {

  },
  updated() {
    this.$refs["reftableFile"].doLayout();
  },
  methods: {
    handlechange(val, data) {
      console.log(val, data,this.inputParams.MJ, "sdklfjsdkljf")
      if(this.inputParams.MJ==null){
        this.$message({
            message:"请选择档案密级",
            type: 'warning'
          });
          return
      }
      changeFileMj({
        daId: this.openInfo.ids,
        categoryId: this.openInfo.categoryId,
        docId: data.DOC_ID,
        mj: data.MJ,
        daMj:this.inputParams.MJ
      }).then(res => {
        console.log(res)
        if (res.msg == "成功!") {
          this.$message({
            message: res.msg,
            type: 'success'
          });
        } else {
          this.$message({
            message: res.msg,
            type: 'warning'
          });
        }
      })
    },
    // 表头部重新渲染
    renderHeaderFile(h, { column, $index }) {
      // 新建一个 span
      let span = document.createElement('span');
      // 设置表头名称
      span.innerText = column.label;
      // 临时插入 document
      document.body.appendChild(span);
      // 重点：获取 span 最小宽度，设置当前列，注意这里加了 20，字段较多时还是有挤压，且渲染后的 div 内左右 padding 都是 10，所以 +20 。（可能还有边距/边框等值，需要根据实际情况加上）
      column.minWidth = span.getBoundingClientRect().width + 120;
      // 移除 document 中临时的 span
      document.body.removeChild(span);
      var element = document.querySelector('.el-table__body-wrapper');
      // element.style.height = this.tableHeightFile - 52 + "px"
      return h('span', column.label);
    },

    //双击进入详情
    celldblclick(row, column, cell, event) {
      console.log(row, "=====")
      this.$emit("celldblclick", row)
    },

    //预览
    onPreviewTap(row) {

      this.$emit("celldblclick", row)
    },


    //补充属性信息,查看属性信息
    onClickDocumentTap(row, type) {
      //    console.log(row,type,"+++++")
      this.$emit("onClickDocumentTap", row, type)
    },

    //转换
    onDocToOfd(row) {

      this.$emit("onDocToOfd", row)
    },
    //删除
    delTap(row) {
      this.$emit("delTap", row)
    },

    //识别
    identifyTap(row) {
      this.$emit("identifyTap", row)
    }


  }
}
</script>
<style lang="scss" scoped>
.wenjianannniu {
  font-size: 18px;
  margin-left: 2px;
  display: inline-block;
  color: #1890ff;
  cursor: pointer;
  margin: 0 5px;
}
.sb{
  background: url("../../assets/images/ocr.png") no-repeat;
  background-size: cover;
  width: 18px;
    height: 18px;
    vertical-align:-3px;
    display: inline-block;
    cursor: pointer;
  
}
</style>
